import QtQuick 2.12
import QtQuick

Window {
    id:root
    width: 1200
    height: width/9*6
    visible: true
    title: qsTr("动画和过度类型")
    Column{
        Rectangle {
            id: flashingblob
            width: 75; height: 75
            color: "blue"
            opacity: 1.0

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    //animateColor.start()
                    animateOpacity.start()
                }
            }
//属性动画 属性值变化动画
           // PropertyAnimation {id: animateColor; target: flashingblob; properties: "color"; to: "green"; duration: 1000}
//数字动画 动画 qreal 类型值的变化
            NumberAnimation {
                id: animateOpacity
                target: flashingblob
                properties: "opacity"
                from: 1.0
                to: 0.5
                loops:5// Animation.Infinite 无限
                running: true
                easing {type: Easing.OutBack; overshoot: 5}
           }
            //位置移动
            PropertyAnimation on x { to: 10 }
            PropertyAnimation on y { to: 10 }
            //颜色动画 分组动画
            SequentialAnimation on color {
                    ColorAnimation { to: "yellow"; duration: 1000 }
                    ColorAnimation { to: "blue"; duration: 1000 }
                }
        }

        //动画变换

        Rectangle {
            width: 75; height: 75
            id: button
            state: "RELEASED"

            MouseArea {
                anchors.fill: parent
                onPressed: button.state = "PRESSED"
                onReleased: button.state = "RELEASED"
            }

            states: [
                State {
                    name: "PRESSED"
                    PropertyChanges { target: button; color: "lightblue"}
                },
                State {
                    name: "RELEASED"
                    PropertyChanges { target: button; color: "lightsteelblue"}
                }
            ]

            transitions: [
                Transition {
                    from: "PRESSED"
                    to: "RELEASED"  //可以是*
                    ColorAnimation { target: button; duration: 100}
                },
                Transition {
                    from: "RELEASED"
                    to: "PRESSED"
                    ColorAnimation { target: button; duration: 100}
                }
            ]
        }


        Rectangle {
            width: 75; height: 75; radius: width
            id: ball
            color: "salmon"

            component BounceAnimation : NumberAnimation {
               easing {
                  type: Easing.OutElastic
                  amplitude: 1.0
                  period: 0.2
               }
            }

            Behavior on x {
                BounceAnimation {}
            }
            Behavior on y {
                BounceAnimation {}
            }
            Behavior on color {
                ColorAnimation { target: ball; duration: 2000 }
            }
        }

        //顺序动画显示
        Rectangle {
            id: banner
            width: 150; height: 100; border.color: "black"

            Column {
                anchors.centerIn: parent
                Text {
                    id: code
                    text: "Code less."
                    opacity: 0.01
                }
                Text {
                    id: create
                    text: "Create more."
                    opacity: 0.01
                }
                Text {
                    id: deploy
                    text: "Deploy everywhere."
                    opacity: 0.01
                }
            }

            MouseArea {
                anchors.fill: parent
                onPressed: playbanner.start()
            }

            SequentialAnimation {
                id: playbanner
                running: false
                NumberAnimation { target: code; property: "opacity"; to: 1.0; duration: 200}
                NumberAnimation { target: create; property: "opacity"; to: 1.0; duration: 200}
                NumberAnimation { target: deploy; property: "opacity"; to: 1.0; duration: 200}
            }
        }
        //共享动画示例
        Rectangle {
            color:"red"
            width: 40;height:40
            // NOT SUPPORTED: this will not work correctly as both Behaviors
            // try to control a single animation instance
            NumberAnimation { id: anim; duration: 300; easing.type: Easing.InBack }
            Behavior on x { animation: anim }
            Behavior on y { animation: anim }

            // 测试：点击移动矩形
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    parent.x = Math.random() * 200;
                    parent.y = Math.random() * 200;
                }
            }
        }

        Rectangle {
            width: 100; height: 100
            color: "red"
            // 在外部定义 component（推荐）
            component MyNumberAnimation2 : NumberAnimation {
                duration: 300
                easing.type: Easing.InOutQuad
            }
            // 使用自定义的 MyNumberAnimation
            Behavior on x { MyNumberAnimation2 {} }
            Behavior on y { MyNumberAnimation2 {} }

            // 测试：点击移动矩形
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    parent.x = Math.random() * 200;
                    parent.y = Math.random() * 200;
                }
            }
        }



    }
}
